<template>

    <div class="musicList">
        <div class="musicListTitleBox">
            <el-text class="musicListTitle">我的歌单</el-text>
        </div>
        <el-scrollbar :height="music_list_height">
            <div v-for="i in 20" class="musicList_item">
                <div class="music_item_left">
                    <div class="music_item_title">
                        <el-avatar :size="50" :icon="music_icon" />
                    </div>
                    <div class="music_item_title"><el-text>歌单名称</el-text></div>
                </div>
                <div class="music_item_right"><el-icon>
                        <ArrowRight />
                    </el-icon></div>
            </div>
        </el-scrollbar>
    </div>

</template>
<script setup>
import music_icon from "@/components/Public/MyIcon/music.vue"
import { ref, computed } from "vue"


let music_list_height = computed(() => {
    return (window.innerHeight - (window.innerHeight * 0.6)) + "px"
})

</script>
<style lang="less" scoped>

.musicList {
    padding: 10px;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4%;
    border-radius: 8px;
    // 这里是音乐列表的渐变色
    background: var(--musicList);
    .musicListTitleBox {
        padding-bottom: 2%;

        .musicListTitle {
            font-size: 1.2em;
            font-weight: bolder;
        }
    }

    .musicList_item {
        padding: 6px;
        border-radius: 8px;
        margin-bottom: 5%;
        background-color: var(--music_list_item);
        display: grid;
        grid-template-columns: 3fr 1fr;

        .music_item_left {
            display: flex;
            align-items: center;

            .music_item_title {
                padding: 2%;
                border-radius: 50%;
            }
        }

        .music_item_right {
            display: flex;
            align-items: center;
            justify-content: end;
            margin-right: 20%;

        }
    }
}

</style>